* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.pic {
  height: 100vh;
  background: url("./bgc.jpg") no-repeat;
  background-size: cover;
  /* forwards当动画完成后，保持最后一帧的状态 */
  animation: fade-away 2.5s linear forwards;
}

.text {
  /* 绝对定位会脱离标准流 */
  /* 居中显示 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  color: #fff;
  line-height: 55px;
  font-size: 36px;
  text-align: center;

  /* 透明度 opacity: 0 完全透明 */
  opacity: 0;

  animation: show 2s cubic-bezier(0.74, -0.1, 0.86, 0.83) forwards;
}

/* 背景图的明暗度动画 */
@keyframes fade-away {
  30% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(.5);
  }

  100% {
    filter: brightness(0);
  }
}

/* 文字的透明度动画 */
@keyframes show {
  20% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}